<template>
  <el-dialog v-model="dialogData.visible"
      :title="dialogData.isUpdate ? '编辑用户' : '新增用户'" width="30%" @close="closeDialog">
    <el-form ref="userForm" :model="dialogData.user" :rules="userRules" label-width="80">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="dialogData.user.username" placeholder="请输入用户名" clearable :readonly="dialogData.isUpdate"/>
      </el-form-item>
      <el-form-item label="密码" v-show="!dialogData.isUpdate">
        <el-input model-value="666666" placeholder="请输入用户名" readonly/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="dialogData.user.name" placeholder="请输入姓名" clearable/>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="dialogData.user.sex" placeholder="请选择性别" clearable>
          <el-option v-for="(s,index) in sexArr" :label="s" :value="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="dialogData.user.age" placeholder="请输入年龄" clearable/>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="dialogData.user.phone" placeholder="请输入联系电话" clearable/>
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="dialogData.user.email" placeholder="请输入电子邮箱" clearable/>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker v-model="dialogData.user.entryTime"
            type="date" placeholder="请选择入职时间" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="离职时间" v-show="dialogData.isUpdate">
        <el-date-picker v-model="dialogData.user.leaveTime"
                        type="date" placeholder="请选择离职时间" value-format="YYYY-MM-DD" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="saveUser(userForm)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {defineProps, ref} from 'vue'
import {FormInstance} from "element-plus";
import {doPost, doPut} from '../../components/ajax'
import { showAlert } from '../../components/tip'
  const sexArr = ref(['男', '女', '其他'])

  const userRules = {
    username: [
      {required: true, message: '请输入用户名', trigger: 'blur'},
      {min: 6, max: 15, message: '用户名只能在6到15个字符之间', trigger: 'blur'},
    ]
  }

  const userForm = ref<FormInstance>()

  //定义调用组件要传递的参数
  const props = defineProps({
    dialogData: Object
  })

  //定义调用组件要传递的函数
  const emit = defineEmits(['searchEvent'])

  const closeDialog = () =>{
    userForm.value.resetFields()
    props.dialogData.user = {}
    props.dialogData.visible = false
  }

  const saveUser = (form: FormInstance | undefined) => {
    if(!form) return;
    form.validate(valid => {
      if(valid){
        //做提交
        if(props.dialogData.isUpdate){
          doPut("/user", props.dialogData.user, resp=>{
            if(resp.data){
              showAlert("提示", "修改成功", () =>{
                closeDialog()
                //调用一次查询
                emit('searchEvent')
              })
            } else {
              showAlert("提示", "修改失败", null)
            }
          })
        } else {
          doPost("/user", props.dialogData.user, resp=>{
            if(resp.data){
              showAlert("提示", "新增成功", () =>{
                closeDialog()
                //调用一次查询
                emit('searchEvent')
              })
            } else {
              showAlert("提示", "新增失败", null)
            }
          })
        }
      } else {
        return false;
      }
    })
  }
</script>

<style scoped>

</style>
